<template>
  <BasicLayout>
    <template #wrapper>
      <table-pagination class="table" :max-height="tableHeight" :loading="loading" :columns="columns" :data="tableData" :pagination-show="false" border />
    </template>
  </BasicLayout>
</template>

<script>
import TablePagination from '@/components/common/TablePagination';
import { getHeadquarterReport } from '@/api/replacementApi';
import config from './config';
export default {
  name: 'HeadquartersDetail',
  components: {
    TablePagination
  },
  data() {
    return {
      columns: config.detailColumns,
      loading: false,
      tableData: []
    };
  },
  inject: ['getTableHeight', 'getSearchPanel', 'countTableHeght'],
  computed: {
    tableHeight() {
      return this.getTableHeight();
    },
    searchPanel() {
      return this.getSearchPanel();
    }
  },
  watch: {
    searchPanel: {
      deep: true,
      handler() {
        this.$nextTick(() => this.countTableHeght(0));
      }
    }
  },
  created() {
    this.onGetHeadquarterReport();
  },
  methods: {
    // 获取总部报表
    onGetHeadquarterReport() {
      this.loading = true;
      getHeadquarterReport({
        date: this.CryptoJS.AES.decrypt(this.$route.params.date, 'date').toString(this.CryptoJS.enc.Utf8),
        eliReportMode: 'HEADQUARTER'
      }).then(({ data }) => {
        this.loading = false;
        this.tableData = data;
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.table{
  margin: 20px 0;
}
</style>

